/** 
  课程成绩变更申请
*/
<template>
  <div class="score-change-apply-container">
    <!-- 课程成绩变更申请列表页开始 -->
    <div v-if="indexKey === 0">
      <condition-card @reset="reset('queryForm')" @search="onSubmit" label-position="right" label-width="150px">
        <el-row :gutter="24" style="height: 50px;">
          <!-- 学年学期 -->
          <el-col :span="8">
            <el-form-item :label="$t('scoreEntrySwitch.semester')">
              <calendar-select ref="semester" v-model="queryForm.condition.calendarId" @load-done="calendarIdLoadDone" :placeholder="$t('common.pla.pleaseSelect')"></calendar-select>
            </el-form-item>
          </el-col>
          <!-- 课程代码/名称 -->
          <el-col :span="8">
            <el-form-item :label="$t('courseScoreMana.teachingClassCode')">
              <el-select
                v-model.trim="queryForm.condition.course"
                :remote-method="remoteMethod"
                filterable
                remote
                clearable
                :placeholder="$t('common.pla.pleaseInput')"
                style="width:100%">
                <el-option
                  v-for="item in options.courseCodeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 课程序号 -->
          <el-col :span="8">
            <el-form-item :label="$t('scoreEntryMana.courseNum')">
              <el-input :placeholder="$t('common.pla.pleaseInput')" v-model="queryForm.condition.courseNum" :maxlength="32" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="height: 50px;">
          <!-- 课程类别 -->
          <el-col :span="8">
            <el-form-item :label="$t('scoreEntryMana.courseType')">
              <el-select v-model="queryForm.condition.courseLabel" style="width: 100%">
                  <el-option
                    v-for="item in options.courseType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 审核状态 -->
          <el-col :span="8">
            <el-form-item :label="$t('scoreMangementBase.auditStatus')">
              <el-select v-model="queryForm.condition.status" style="width: 100%">
                  <el-option
                    v-for="item in options.auditStatusOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
      <el-card
        v-loading="loading"
        shadow="never"
        body-style="padding: 24px;"
        style="margin-top:24px">
        <h1 class="condition-title">{{ $t('scoreEntryMana.courseList') }}</h1>
        <!-- <div class="div-main clearfix">
          <div class="float-left">
            <el-input
              clearable
              v-model="queryForm.condition.teacherId"
              :placeholder="$t('scoreChangeApply.studentSearchText')"
              style="width:250px"
              @change="onSubmit"
              @keyup.enter.native="onSubmit">
                <i slot="prefix"
                  class="el-icon-search"
                  style="margin-top:10px;cursor:pointer"
                  @click="onSubmit">
                </i>
            </el-input>
          </div>
        </div> -->
        <edu-table :pagination="false" :order='true' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
          <!-- 课程代码 -->
          <edu-table-column :label="$t('scoreEntryMana.courseCode')" prop="courseCode"></edu-table-column>
          <!-- 课程名称 -->
          <edu-table-column :label="$t('scoreEntryMana.courseName')" prop="courseName"></edu-table-column>
          <!-- 课程序号 -->
          <edu-table-column :label="$t('scoreEntryMana.courseNum')" prop="courseNum"></edu-table-column>
          <!-- 课程类别 -->
          <edu-table-column :label="$t('scoreEntryMana.courseType')" prop="courseLabelName"></edu-table-column>
          <!-- 学分 -->
          <edu-table-column :label="$t('scoreEntryMana.credit')" prop="credit"></edu-table-column>
          <!-- 录入人 -->
          <edu-table-column :label="$t('courseScoreMana.entryPerson')" prop="importUser"></edu-table-column>
          <!-- 录入时间 -->
          <edu-table-column :label="$t('scoreEntryMana.entryTime')" prop="importTime"></edu-table-column>
          <!-- 状态 -->
          <edu-table-column :label="$t('scoreEntryMana.status')" prop="status">
            <template slot-scope="scope">
              <!-- <el-tag
                v-if="scope.row.status === 0"
                type="warning">{{ $t('scoreChangeApply.draft') }}</el-tag> -->
              <el-tag
                v-if="scope.row.status === 1"
                type="fail">{{ $t('scoreChangeApply.approvalling') }}</el-tag>
              <el-tag
                v-if="scope.row.status === 3"
                type="warning">{{ $t('scoreChangeApply.turnDown') }}</el-tag>
              <el-tag
                v-if="scope.row.status === 2"
                type="success">{{ $t('scoreChangeApply.appPass') }}</el-tag>
            </template>
          </edu-table-column>
          <!-- 操作 -->
          <edu-table-column :label="$t('common.text.operation')" prop="operation" fit>
            <template slot-scope="scope">
              <!-- 查看 -->
              <el-button v-if="scope.row.status === 1 || scope.row.status === 2" type="text" @click="selectInfo(scope.row)">{{ $t('scoreMangementBase.select') }}</el-button>
              <!-- 编辑 -->
              <el-button v-if="scope.row.status === 3" type="text" @click="editInfo(scope.row)">{{ $t('common.btn.edit') }}</el-button>
              <!-- 申请变更 -->
              <el-button
                v-if="scope.row.status === null"
                type="text"
                @click="applyChange(scope.row)">
                {{ $t('scoreChangeApply.applyChange') }}
              </el-button>
            </template>
          </edu-table-column>
        </edu-table>
        <el-row type="flex" class="row-bg" justify="end">
          <el-col>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryForm.pageNum_"
              :page-sizes="[20, 40, 80, 100]"
              :page-size="queryForm.pageSize_"
              layout="total, sizes, prev, pager, next, jumper"
              :total="queryForm.total_"
              style="float:right;margin-top:10px"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 课程成绩变更申请列表页结束 -->
     <!-- 成绩变更申请开始 -->
    <div v-if="indexKey === 1">
      <course-score-change :detailInfo="detailInfo" @refresh-main-page="backToMain"></course-score-change>
    </div>
    <!-- 成绩变更申请结束 -->
    <!-- 成绩变更编辑开始 -->
    <div v-if="indexKey === 2">
      <course-score-change-edit :detailInfo="detailInfo" @refresh-main-page="backToMain"></course-score-change-edit>
    </div>
    <!-- 成绩变更编辑结束 -->
    <!-- 成绩变更查看开始 -->
    <div v-if="indexKey === 3">
      <course-score-change-select :basicInfo="basicInfo" :breadcrumbInfo="breadcrumbInfo" @refresh-main-page="backToMain"></course-score-change-select>
    </div>
    <!-- 成绩变更查看结束 -->
  </div>
</template>
<script>
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
import { queryDic } from 'common/src/api/dictionary';
import { searchCourses } from 'common/src/api/score/courseScoreManage.js';
import { coursesLabelList } from 'common/src/api/score/courseScoreChangeMange.js';
import courseScoreChange from './courseScoreChange';
import courseScoreChangeEdit from './courseScoreChangeEdit';
import courseScoreChangeSelect from '../common/courseScoreChangeSelect';
export default {
  components: {
    'course-score-change': courseScoreChange,
    'course-score-change-edit': courseScoreChangeEdit,
    'course-score-change-select': courseScoreChangeSelect
  },
  data () {
    return {
      indexKey: 0,
      breadcrumbInfo: {
        path: '',
        parentTitle: ''
      },
      dataList: [],
      multipleSelection: [],
      queryForm: {
        condition: {
          calendarId: '',
          course: '',
          courseNum: '',
          teacherId: ''
        },
        pageNum_: 1,
        pageSize_: 20,
        total_: 0
      },
      options: {
        courseCodeList: [],
        courseType: [],
        auditStatusOption: [
          {
            value: 1,
            label: '审批中'
          },
          {
            value: 2,
            label: '审核通过'
          },
          {
            value: 3,
            label: '驳回'
          }
        ]
      }
    }
    
  },
  props: {

  },
  created() {

  },
  mounted() {
    if (this.queryForm.condition.calendarId) {
      this.onSubmit()
    }
    this.getCourseType()
  },
  methods: {
    // 校验特殊字符$
    checkSpecial(rule, value, callback) {
      let regEn = /[`$]/im
      if (regEn.test(value)) {
        callback(new Error(this.$t('graduateBase.specialText')))
      } else {
        callback()
      }
    },
    calendarIdLoadDone() {
      this.onSubmit()
    },
    onSubmit() {
      this.queryForm.pageNum_ = 1
      this.getListData()
    },
    reset (ref) {
      for (let key in this.queryForm.condition) {
        if (key !== 'calendarId') {
          this.queryForm.condition[key] = ''
        }
      }
      this.queryForm.condition.calendarId = this.$refs.semester.$data.currentTermId
      this.queryForm.pageNum_ = 1
      this.queryForm.pageSize_ = 20
      this.getListData()
    },
    getListData() {
      scoreManagementApi.queryCourseScoreChangeApply(this.queryForm).then((res) => {
        this.dataList = res.data.list
        this.queryForm.total_ = res.data.total
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.getListData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.getListData()
    },
    // 返回主页
    backToMain() {
      this.multipleSelection = []
      this.indexKey = 0
      this.onSubmit()
    },
    // 课程代码、名称搜索方法
    remoteMethod(val) {
      if (val !== '') {
        this.loading = true
        let lang = this.$store.getters.language
        scoreManagementApi.queryCourseInfoByCourseCode({
          courseCode: val
        }).then(res => {
          this.loading = false
          if (res.code == 200) {
            const list = res.data &&
              res.data.map(e => {
                let obj = {}
                obj.label = lang === 'cn' ? e.name + '(' + e.code + ')' : e.nameEn + '(' + e.code + ')'
                obj.value = e.code
                return obj
              })
            this.options.courseCodeList = list
          }
        })
      } else {
        this.options.courseCodeList = []
        this.queryForm.condition.course = ''
      }
    },
    // 获取课程类别
    getCourseType() {
      let val = ''
      coursesLabelList(val).then(res => {
        res.data.forEach(item => {
          this.options.courseType.push({
            label: item.label,
            value: item.id,
            key: item.id
          })
        })
      })
    },
    // 查看
    selectInfo(row) {
      this.basicInfo = row
      this.breadcrumbInfo.path = '/courseScoreApplyChange'
      this.breadcrumbInfo.parentTitle = this.$t('courseScoreApplyChange.courseScoreApplyChange')
      this.indexKey = 3
    },
    // 编辑
    editInfo(row) {
      this.detailInfo = row
      this.indexKey = 2
    },
    // 申请变更
    applyChange(row) {
      this.detailInfo = row
      this.indexKey = 1
    }, 
  }
}
</script>

<style lang="scss" scoped>
  .score-change-apply-container ::v-deep {
    .div-main {
      margin-bottom: 16px;
    }
  }
</style>